<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>上海明匠智能图标</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="css/style.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="css/form.css"/>
    <script type='text/javascript' src='js/jquery.min.js'></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
</head>
<body>
<div class="testing" style="min-width:100%">
    <header class="main">
        <h1 style="text-align:center"><strong>上海明匠智能图表</strong></h1>
    </header>
    <section class="user">
        <div class="profile-img">
            <p><img src="images/mj_logo.png" alt="" height="40" width="40"/> 欢迎来到上海明匠</p>
        </div>
    </section>
</div>
<section class="alert">
    <div class="green green2">
        <p style="text-align:center">请输入相应信息来填写图标</p>
    </div>
</section>
<div class="page-container">
    <div class="container">
        <div class="row">
            <div class="span8 page-content">
                <article class="type-page hentry clearfix">
                    <h1 class="post-title"/>
                    <a href="#">图表的信息</a>
                </article>
                <form id="contact-form"  class="row" action="/createGraph.shtml" method="post">
                    <p class="span2">

                    <p for="name" style="margin-bottom:1%;">图表名称 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="action_name" class="required input-xlarge" value=""
                               title="* 请输入图表名称"/>
                    </p>

                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">小标题 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="notes" class="required span6" rows="6" title="* 请输入小标题"/>
                    </p>

                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择查询间隔 <span>*</span></p>
                        <select name="exec_type">
                            <option value="week">week</option>
                            <option value="interval">interval</option>
                            <option value="everytime">everytime</option>
                            <option value="day">day</option>
                            <option value="month">month</option>
                            <option value="once">once</option>
                        </select>
                    </div>
                    <p class="span2">
                    <p for="message" style="margin-bottom:1%;color:black;">图表数据信息 <span>*</span></p>
                    </p>
                    <label>

                        <div id="information">

                            <input class="span4" id="span1" disabled="true" value="time_key"/>
                            <input class="span5" id="span2"/>
                            <input class="span4" id="span3" disabled="true" value="x_line"/>
                            <input class="span5" id="span4"/>
                            <input class="span4" id="span5" disabled="true" value="groups_by"/>
                            <input class="span5" id="span6"/>
                            <input class="span4" id="span7" disabled="true" value="value_col"/>
                            <input class="span5" id="span8"/>
                            <input class="span4" id="span9" disabled="true" value="need_to_show_as_chinese"/>
                            <input class="span5" id="span10"/>
                            <input type="varchar" style="display:none;" name="graph_info" class="required span6"
                                   rows="6" title="* 请输入信息" id="graph_info"/>
                        </div>
                        <p class="span6" style="display:none;">
                            <input type="varchar" name="graph_info" class="required span6" rows="6" title="* 请输入信息" id="graph_info"/>
                        </p>
                    </label>

                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">自定义间隔时间 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="int" name="interal_time" class="required span6" rows="6" title="* 请输入自定义间隔时间"/>
                    </p>

                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择图表类型 <span>*</span></p>
                        <select name="graph_type">
                            <option value="stack">stack</option>
                            <option value="pie">pie</option>
                            <option value="line">line</option>
                            <option value="bar">bar</option>
                        </select>
                    </div>
                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">规则语句 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="rule_value" class="required span6" rows="6" title="* 请输入规则语句"/>
                    </p>

                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">关联的数据表名 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="hbase_table_name" class="required span6" rows="6"
                               title="* 请输入关联的数据表名"/>
                    </p>

                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">间隔时间 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="interval_time" class="required span6" rows="6" title="* 请输入间隔时间"/>
                    </p>

                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择规则类型 <span>*</span></p>
                        <select name="rule_type">
                            <option value="value">value</option>
                            <option value="sql_text">sql_text</option>
                        </select>
                    </div>
                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">关联的列 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="cols" class="required span6" rows="6" title="* 请输入关联的列"/>
                    </p>

                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择数据更新间隔 <span>*</span></p>
                        <select name="time_type">
                            <option value="lastyear">lastyear</option>
                            <option value="interval">interval</option>
                            <option value="lastday">lastday</option>
                            <option value="lastweek">lastweek</option>
                            <option value="lastmonth">lastmonth</option>
                        </select>
                    </div>
                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择增加到哪一个类别 <span>*</span></p>
                        <select name="classification_id">
                            <option th:each="listItem : ${classList}" th:text="${listItem.getClassification_name()}"
                                    th:value="${listItem.getClassification_id()}"></option>
                        </select>
                    </div>
                    <p class="span6 offset2 bm30" style="display:block">
                        <input type="submit" name="submit" value="提交" class="btn btn-inverse buon"/>
                    </p>
                    <!--       <input type="submit" name="submit" value="" class="btn btn-inverse buon"/> -->
                    <p class="span6 offset2 bm30" style="display:block">
                        <input type="button" onclick="javascript:history.back(-1)"
                               style="float:right; text-align:center" value="取消" class="btn btn-inverse buon"/>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#contact-form").validate({meta: "validate"});
    });
</script>
<script type="text/javascript" src="js/submit.js"></script>
</body>
</html>